<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改密码 - 名片维护系统</title>
    <link rel="stylesheet" th:href="@{/css/change-password.css}">
</head>
<body>
    <div class="container">
        <div class="form-container">
            <h2 class="form-title">修改密码</h2>
            <div class="message error" id="error-message" style="display: none;"></div>
            <div class="message success" id="success-message" style="display: none;"></div>
            
            <form id="change-password-form">
                <div class="form-group">
                    <label class="form-label" for="old-password">旧密码</label>
                    <input class="form-input" type="password" id="old-password" name="oldPassword" required>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="new-password">新密码</label>
                    <input class="form-input" type="password" id="new-password" name="newPassword" required>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="confirm-password">确认新密码</label>
                    <input class="form-input" type="password" id="confirm-password" name="confirmPassword" required>
                </div>
                
                <button class="form-button" type="submit">修改密码</button>
            </form>
            
            <a class="form-link" href="/">返回首页</a>
        </div>
    </div>
    
    <script>
        // 表单提交
        document.getElementById('change-password-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const oldPassword = document.getElementById('old-password').value;
            const newPassword = document.getElementById('new-password').value;
            const confirmPassword = document.getElementById('confirm-password').value;
            
            // 表单验证
            if (!oldPassword || !newPassword || !confirmPassword) {
                showError('请填写完整信息');
                return;
            }
            
            if (newPassword !== confirmPassword) {
                showError('两次密码输入不一致');
                return;
            }
            
            // 发送请求
            fetch('/user/change-password', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: 'oldPassword=' + encodeURIComponent(oldPassword) + 
                      '&newPassword=' + encodeURIComponent(newPassword) + 
                      '&confirmPassword=' + encodeURIComponent(confirmPassword)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showSuccess(data.message);
                    document.getElementById('change-password-form').reset();
                    // 3秒后跳转到登录页
                    setTimeout(function() {
                        window.location.href = '/user/login';
                    }, 3000);
                } else {
                    showError(data.message);
                }
            })
            .catch(error => {
                showError('服务器错误，请稍后再试');
                console.error('Error:', error);
            });
        });
        
        // 显示错误信息
        function showError(message) {
            const errorElement = document.getElementById('error-message');
            const successElement = document.getElementById('success-message');
            
            errorElement.textContent = message;
            errorElement.style.display = 'block';
            successElement.style.display = 'none';
        }
        
        // 显示成功信息
        function showSuccess(message) {
            const errorElement = document.getElementById('error-message');
            const successElement = document.getElementById('success-message');
            
            successElement.textContent = message;
            successElement.style.display = 'block';
            errorElement.style.display = 'none';
        }
    </script>
</body>
</html>